<template>
	<div class="search_tools">
		<div class="search_tools_select">
			<span @click="selectKeyHandle($event)">{{selectKey}}<i class="icon--6"></i></span>
			<CustomSelect :list="selectList" :isShow="isShow" v-on:receive="receive" />
		</div>
		<div class="search_tools_input">
			<input :value="keyword" v-focus type="text" @keyup="searchInputHandle($event)" placeholder="请输入关键词并回车确认" />
		</div>
	</div>
</template>

<script>
	import CustomSelect from "../../components/search/custom-select.vue";
	export default {
		name: "SearchTools",
		props:["pgnum", "keyword"],
		data: function(){
			return {
				selectKey: "新闻",
				isShow: false,
				selectList:"新闻".split(' '),
				selectType: "1",
				oldKey:""
			}
		},
		created:function(){
			window.scrollTo(1,1)
		},
		components:{
			CustomSelect
		},
		methods:{
			searchInputHandle(e){
				let val = e.target.value.replace(/^\s+|\s+$/gim, "");
				
				if (e.keyCode === 13 && val !== this.oldKey){
					this.searchRequest(val, this.selectType);
				}
				if (val===""){
					this.$emit("searchInitCommunications","");
				}
			},
			searchRequest(val, type){
				let that = this;
				this.$set(this, "keyword", val);
				this.$set(this, "oldKey", val);
				let api = null;
				if (type === "1"){
					api = this.$store.state.api.searchNewsListApi.tmpl({
						keyword:this.keyword,
						pgnum:this.pgnum
					});
				}else if (type === "2"){
					api = this.$store.state.api.searchStockListApi.tmpl({
						keyword:this.keyword,
						pgnum:this.pgnum
					});
				}
				if (api && val !== ""){
					this.$http.jsonp(api).then(function(res){
						console.log(res)
						let data = [];
						res.body.data.forEach((item)=>{
							data.push({
								title:item.title,
								time: dateFormat(item.sortTime),
								id: item.id
							})
						})
						that.$emit("searchResultListHandle", data, type, val);
					}, function(){
						that.$emit("searchResultListHandle", [], type, val);
					})
				}
			},
			selectKeyHandle(e){
				this.$set(this, "isShow", this.isShow ? false : true)
			},
			receive(args){
				console.log(args)
				this.$set(this, "selectType", (this.selectList.indexOf(args)+1)+"");
				this.$set(this, "selectKey", args);
				this.$set(this, "isShow", false);
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.search_tools{
		display: flex;
		padding:20/@base;
		background-color: #fff;
		div{
			&.search_tools_select{
				font-size:24/@base;
				text-align: center;
				width:140/@base;
				position: relative;
				span{
					display:block;
					padding:10/@base 20/@base;
					border-right: 1/@base solid #efefef;
					i{
						display:inline-block;
						margin-left:10/@base;
						font-size: 20/@base;
					}
				}
				ul{
					position: absolute;
					top:60/@base;
					left:0;
					right:0;
					li{
						background-color: #efefef;
						padding:10/@base 20/@base;
						border-top:1/@base solid #ccc;
						&:first-child{
							border-top:0;
						}
					}
				}
			}
			&.search_tools_input{
				width:90%;
				display:flex;
				input{
					width:100%;
					padding:10/@base 20/@base;
					font-size:24/@base;
				}
			}
		}
	}
</style>
